<template>
  <div>
    <div>
      <ele-page
        v-loading="loading"
        :formConfig="searchConfig"
        ref="eleTable"
        :operateList="operateList"
        @handleOperateEvent="handleOperateEvent"
        :column="column"
        :getList="getList"
        uniqueId="wmsOutTaskDetailTable"
        :initForm="otherParams"
      >
      </ele-page>
    </div>
    <ele-form-drawer
      :isLoading="isLoading"
      v-model="formDataDialog"
      v-bind="formDescDialog"
      :request-fn="handleSubmit"
      :visible.sync="visible"
      :title="title"
    >
    </ele-form-drawer>
  </div>
</template>

<script>
import { operateList, searchConfig, formDescDialog, rowConfig } from "./config";
import {
  getList,
  rowCreate,
  rowUpdate,
  rowDel,
  getInfo,
  getMasterInfo,
  getAreaCodeList,
  getOrderTypeList,
  getAccountingFlagList,
  getCurrentWarehouseCode,
  cancelMerge,
} from "@/api/outbound/wmsOutTaskDetail";
import {
  getPushStatus,
  getLineStatus,
  getSnControl,
} from "@/api/inbound/mesInTaskDetail";
import { popover } from "@/utils/judge";
import { getDict, getUnitDictList } from "@/api/common";
export default {
  name: "wmsOutTaskDetail",
  data() {
    return {
      title: null,
      visible: false,
      isLoading: false,
      loading: false,
      formDataDialog: {},
      formDescDialog, // 新增修改框
      searchConfig,
      mergeList: [],
      operateList,
      getList,
      otherParams: this.$route.query,
      // 列表页字段的绑定配置
      column: [
        {
          type: "selection",
          fixed: "left",
        },
        {
          type: "index",
          label: $i18n.t("common.order"),
          width: 60,
          fixed: "left",
        },
        // {
        //   prop: 'factoryCode',
        //   label: '工厂编码',
        //   width: 100,
        //   fixed: 'left'
        // },
        //        {
        //          prop: "warehouseCode",
        //          label: $i18n.t("common.warehouseCode"),
        //          width: 130
        //        },
        {
          prop: "warehouseCode",
          columnKey: "warehouseName",
          label: $i18n.t("common.warehouseName"),
          showOverflowTooltip: true,
          width: 150,
          optionProp: {
            value: "modelingCode",
            label: "modelingName",
          },
          option: async (data) => {
            const list = await getCurrentWarehouseCode();
            return list.data.result;
          },
        },
        // {
        //   prop: "areaCode",
        //   label: $i18n.t("common.areaCode"),
        //   width: 120,
        //   showOverflowTooltip: true,
        //   optionProp: {
        //     value: "areaCode",
        //     label: "areaDesc"
        //   },
        //   option: async (data) => {
        //     const list = await getAreaCodeList()
        //     return list.data.result
        //   },
        // },
        // {
        //   prop: "locationCode",
        //   label: $i18n.t("common.locationCode"),
        //   width: 120
        // },
        {
          prop: "orderNo",
          label: $i18n.t("wmsOutTaskDetail.orderNo"),
          width: 180,
          showOverflowTooltip: true,
          render: (h, scope) => {
            return popover(scope.row.orderNo, h, 220, () => {
              this.goChild({ orderNo: scope.row.orderNo });
            });
          },
          fixed: "left",
        },
        //        {
        //          prop: 'customerBarcode',
        //          label: '客户编码',
        //          width: 120
        //        },
        {
          prop: "orderLine",
          label: $i18n.t("wmsOutTaskDetail.orderLine"),
          width: 120,
        },
        {
          prop: "upstreamOrderLine",
          label: $i18n.t("wmsOutTaskDetail.upstreamOrderLine"),
          width: 100,
        },
        {
          prop: "orderType",
          label: $i18n.t("wmsOutTaskDetail.orderType"),
          width: 100,
          optionProp: {
            value: "value",
            label: "description",
          },
          option: async (data) => {
            const list = await getOrderTypeList();
            return list.data.result;
          },
        },
        {
          prop: "lineStatus",
          label: $i18n.t("wmsOutTaskDetail.lineStatus"),
          width: 100,
          optionProp: {
            value: "value",
            label: "description",
          },
          option: async (data) => {
            const list = await getLineStatus();
            return list.data.result;
          },
        },
        {
          prop: "goodsCode",
          label: $i18n.t("common.materialCode"),
          width: 140,
          showOverflowTooltip: true,
        },
        {
          prop: "goodsName",
          label: $i18n.t("common.materialName"),
          width: 220,
          showOverflowTooltip: true,
        },
        {
          prop: "originalAmount",
          label: $i18n.t("wmsOutTaskDetail.originalAmount"),
          width: 110,
        },
        {
          prop: "planAmount",
          label: $i18n.t("wmsOutTaskDetail.planAmount"),
          width: 110,
        },
        {
          prop: "scanAmount",
          label: $i18n.t("wmsOutTaskDetail.scanAmount"),
          width: 110,
        },
        {
          prop: "accountingAmount",
          label: $i18n.t("wmsOutTaskDetail.accountingAmount"),
          width: 110,
        },
        {
          prop: "interceptAmount",
          label: $i18n.t("wmsOutTaskDetail.interceptAmount"),
          width: 110,
        },
        {
          prop: "summaryOrderNo",
          label: $i18n.t("wmsOutTaskDetail.summaryOrderNo"),
          width: 200,
        },
        // {
        //   prop: "summaryOrderLine",
        //   label: $i18n.t("wmsOutTaskDetail.summaryOrderLine"),
        //   width: 110,
        // },
        //        {
        //          prop: 'waveOrderNo',
        //          label: '波次单号',
        //          width: 120,
        //          showOverflowTooltip: true
        //        },
        //       {
        //          prop: 'waveOrderLine',
        //          label: '波次行项目',
        //          width: 120
        //        },
        // {
        //   prop: "orderType",
        //   label: $i18n.t("wmsOutTaskDetail.orderType"),
        //   width: 130,
        //   optionProp: {
        //     value: "value",
        //     label: "description"
        //   },
        //   option: async (data) => {
        //     const list = await getOrderTypeList()
        //     return list.data.result
        //   }
        // },
        // {
        //   prop: 'palletCode',
        //   label: '托盘码',
        //   showOverflowTooltip: true
        // },
        // {
        //   prop: 'packageCode',
        //   label: '包装箱码',
        //   width: 180,
        //   showOverflowTooltip: true
        // },
        // {
        //   prop: 'boxCode',
        //   label: '箱码',
        //   width: 180,
        //   showOverflowTooltip: true
        // },
        // {
        //   prop: "barcode",
        //   label: $i18n.t("common.uniqueCode"),
        //   width: 550,
        //   showOverflowTooltip: true,
        // },
        // {
        //   prop: "customerBarcode",
        //   label: $i18n.t("wmsOutTaskDetail.customerBarcode"),
        //   width: 400,
        //   showOverflowTooltip: true,
        // },
        {
          prop: "unit",
          label: $i18n.t("common.unit"),
          // optionProp: {
          //   value: "value",
          //   label: "description"
          // },
          // option: async () => {
          //   const list = await getUnitDictList()
          //   return list.data.result
          // }
        },
        {
          prop: "requireLoc",
          width: 110,
          label: $i18n.t("wmsOutTaskDetail.requireLoc"),
        },
        {
          prop: "owner",
          width: 110,
          label: $i18n.t("common.owner"),
        },
        {
          prop: "version",
          label: $i18n.t("common.version"),
          showOverflowTooltip: true,
          width: 140,
        },
        {
          prop: "batchNo",
          label: $i18n.t("common.batchNo"),
          width: 140,
          showOverflowTooltip: true,
        },
        {
          prop: "snControl",
          label: $i18n.t("wmsOutTaskDetail.snControl"),
          width: 100,
          optionProp: {
            value: "value",
            label: "description",
          },
          option: async (data) => {
            const list = await getSnControl();
            return list.data.result;
          },
        },
        {
          prop: "erpStatus",
          label: $i18n.t("wmsOutTaskDetail.pushStatus"),
          width: 100,
          optionProp: {
            value: "value",
            label: "description",
          },
          option: async (data) => {
            const list = await getPushStatus();
            return list.data.result;
          },
        },
        {
          prop: "qualityGenereteStatus",
          label: $i18n.t("wmsOutTaskDetail.qualityGenereteStatus"),
          width: 120,
          showOverflowTooltip: true,
          optionProp: {
            value: "value",
            label: "description",
          },
          option: async (data) => {
            const list = await getDict("WMS_QUALITY_GENERETE_STATUS");
            return list.data.result;
          },
        },
        {
          prop: "qualityMaterialStatus",
          label: $i18n.t("wmsOutTaskDetail.qualityMaterialStatus"),
          width: 120,
          showOverflowTooltip: true,
          optionProp: {
            value: "value",
            label: "description",
          },
          option: async (data) => {
            const list = await getDict("QUALITY_TYPE");
            return list.data.result;
          },
        },
        {
          prop: "qualityStatus",
          label: $i18n.t("wmsOutTaskDetail.qualityStatus"),
          width: 120,
          showOverflowTooltip: true,
          optionProp: {
            value: "value",
            label: "description",
          },
          option: async (data) => {
            const list = await getDict("QMS_INSPECTION_RESULT_STATUS");
            return list.data.result;
          },
        },
        {
          prop: "qualityResult",
          label: $i18n.t("wmsOutTaskDetail.qualityResult"),
          width: 120,
          showOverflowTooltip: true,
          optionProp: {
            value: "value",
            label: "description",
          },
          option: async (data) => {
            const list = await getDict("INSPECTION_ASSIGNMENT_RESULT");
            return list.data.result;
          },
        },
        /*{
          prop: "assignmentDetailStatus",
          label: $i18n.t("wmsOutTaskDetail.assignmentDetailStatus"),
          width: 120,
          showOverflowTooltip: true,
          optionProp: {
            value: "value",
            label: "description",
          },
          option: async (data) => {
            const list = await getDict("QMS_INSPECTION_RESULT_STATUS");
            return list.data.result;
          },
        },*/
        {
          prop: "qualityTime",
          label: $i18n.t("wmsOutTaskDetail.qualityTime"),
          width: 180,
          showOverflowTooltip: true,
        },

        // {
        //   prop: "amount",
        //   label: $i18n.t("common.amount")
        // },

        //        {
        //          prop: 'customerCode',
        //          label: '客商编码',
        //          width: 140,
        //          showOverflowTooltip: true
        //        },
        // {
        //   prop: "owner",
        //   label: $i18n.t("common.owner"),
        //   width: 120
        // },
        // {
        //   prop: 'accountingFlag',
        //   label: '过账状态',
        //   width: 120,
        //   optionProp: {
        //     value: 'value',
        //     label: 'description'
        //   },
        //   option: async (data) => {
        //     const list = await getAccountingFlagList()
        //     return list.data.result
        //   }
        // },
        // {
        //   prop: 'accountingTime',
        //   label: '过账时间',
        //   width: 170
        // },
        // {
        //   prop: 'accountingOrder',
        //   label: '过账凭证号',
        //   width: 140,
        //   showOverflowTooltip: true
        // },
        // {
        //   prop: 'accountingMessage',
        //   label: '过账返回信息',
        //   width: 180,
        //   showOverflowTooltip: true
        // },
        {
          prop: "remark",
          label: $i18n.t("common.remark"),
          width: 180,
          showOverflowTooltip: true,
        },
        {
          prop: "createByName",
          label: $i18n.t("common.createByName"),
          width: 130,
        },
        {
          prop: "createTime",
          label: $i18n.t("common.createTime"),
          width: 170,
        },
        {
          prop: "updateByName",
          label: $i18n.t("common.updateByName"),
          width: 130,
        },
        {
          prop: "updateTime",
          label: $i18n.t("common.updateTime"),
          width: 170,
        },
        // {
        //   prop: "operate",
        //   label: "操作",
        //   width: 160,
        //   render: (h, scope) => {
        //     return (
        //       <ele-row-operation
        //         scope={scope}
        //         rowConfig={rowConfig}
        //         onRowOperate={this.rowOperate}
        //       ></ele-row-operation>
        //     );
        //   },
        // },
      ],
    };
  },
  computed: {},
  methods: {
    // 跳转至子页面
    goChild(queryParam) {
      // if (this.typeInto) {
      //   this.$emit("handerLink", queryParam);
      // } else {
      const pathParam = "/outbound/wmsOutTaskScan";
      this.$router.push({ path: pathParam, query: queryParam });
      // }
    },
    // 表格顶部按钮操作事件
    handleOperateEvent({ handleName, name, rows }) {
      this.title = name;
      const fnc = {
        add: () => {
          getMasterInfo(this.$route.query.outTaskId)
            .then((res) => {
              // this.formDataDialog = {}
              // 默认主子表的关联字段相同，若有问题，自己根据实际情况转换
              // this.formDataDialog = res.data.result
              this.changeSub(false);
              this.formDataDialog = {
                outTaskId: res.data.result.id,
                orderNo: res.data.result.orderNo,
              };
              this.visible = true;
            })
            .finally(() => {
              this.isLoading = false;
            });
        },
        delete: () => {
          this.$confirm(
            $i18n.t("common.deleteBatch", {
              name: $i18n.t("wmsOutTaskDetail.name"),
            }),
            $i18n.t("common.tip"),
            {
              confirmButtonText: $i18n.t("common.ok"),
              cancelButtonText: $i18n.t("common.cancel"),
              type: "warning",
            }
          ).then(() => {
            const ids = rows.map((val) => val.id).join(",");
            this.rowDel(ids);
          });
        },
        mergeOrder: () => {
          const filters = rows.filter(
            (val) =>
              !this.mergeList.some(
                (item) =>
                  item.orderNo == val.orderNo && item.goodsCode == val.goodsCode
              )
          );

          this.mergeList.push(...filters);
        },
        cancelJoin: () => {
          let msg = "";
          let leftList = rows.filter((item) => item.scanAmount > 0);
          leftList.map((ite) => {
            msg +="[" + ite.orderNo + "]下物料[" + ite.goodsCode + "]";
          });
          if (leftList.length) {
            this.$confirm(
              "出库单" + msg + "已打印,是否继续取消合单?",
              $i18n.t("common.tip"),
              {
                confirmButtonText: $i18n.t("common.submit"),
                cancelButtonText: $i18n.t("common.cancel"),
                type: "warning",
              }
            ).then(() => {
              const idList = rows.map((val) => val.id);
              let ob = {};
              ob.idList = idList;
              //    console.log("idList=" + idList);
              cancelMerge(ob)
                .then((res) => {
                  const message = res.data.message;
                  this.$message.success(message);
                  this.refresh();
                })
                .finally(() => {
                  this.loading = false;
                });
              return;
            });
          } else {
            this.$confirm(
              $i18n.t("wmsOutTaskDetail.cancelJoinConfirm"),
              $i18n.t("common.tip"),
              {
                confirmButtonText: $i18n.t("common.submit"),
                cancelButtonText: $i18n.t("common.cancel"),
                type: "warning",
              }
            ).then(() => {
              const idList = rows.map((val) => val.id);
              let ob = {};
              ob.idList = idList;
              //    console.log("idList=" + idList);
              cancelMerge(ob)
                .then((res) => {
                  const message = res.data.message;
                  this.$message.success(message);
                  this.refresh();
                })
                .finally(() => {
                  this.loading = false;
                });
            });
          }
        },
      };
      fnc[handleName] && fnc[handleName]();
    },
    // 表格行操作事件
    rowOperate({ handleName, name, row }) {
      this.title = name;
      const fnc = {
        show: () => {
          // 修改详情，并打开界面
          this.editInfo(row.id, true);
        },
        edit: () => {
          // 修改详情，并打开界面
          this.editInfo(row.id, false);
        },
      };
      fnc[handleName] && fnc[handleName]();
    },
    // 弹框提交事件
    handleSubmit(data) {
      if (this.isLoading) return; // 判断状态
      this.isLoading = true;
      this.formDataDialog.id ? this.rowUpdate(data) : this.rowCreate(data);
    },
    // 新增
    rowCreate(data) {
      rowCreate(data)
        .then((res) => {
          const message = res.data.message;
          this.$message.success(message || $i18n.t("common.addSuccess"));
          this.visible = false;
          this.refresh();
        })
        .finally(() => {
          this.isLoading = false;
        });
    },
    detele(data) {
      let { orderNo, list = [], goodsCode } = data;
      if (list.length > 0) {
        //删除整个领料单
        this.mergeList = this.mergeList.filter(
          (val) => !(val.orderNo == orderNo)
        );
      } else {
        //删除物料
        this.mergeList = this.mergeList.filter(
          (val) => !(val.orderNo == orderNo && val.goodsCode == goodsCode)
        );
      }
    },
    handleSubmitPersonnel(data) {
      this.isLoading = true;
      let findName = this.pickPersonList.find(
        (val) => val.jobNumber == data.moCode
      );
      changePicker({ idList: this.idList, ...data, moName: findName.nickName })
        .then((_) => {
          this.$message.success($i18n.t("common.operateSuccess"));

          this.personnelVisible = false;
          this.refresh(false);
        })
        .finally((_) => {
          this.isLoading = false;
        });
    },
    //打印
    handleSubmitPrint(data) {
      console.log("打印", data);
      // /picking/pickPrint
      // /picking/callPrint
      // this.$router.push({
      //   path: "/picking/pickPrint",
      //   query: data,
      // });
      this.printVisible = false;
      this.$router.push({
        path:
          data.orderPrintType == "PS"
            ? "/picking/callPrint"
            : "/picking/pickPrint",
        query: data,
      });
    },
    orderTypeChange(val) {
      console.log("dayin1", this.printRow);
      console.log("dayin2", orderTypeMap);
      this.$set(
        this.formPrintDialog,
        "orderNo",
        val ? this.printRow[orderTypeMap[val]] : ""
      );
    },
    successFun(data) {
      this.mergeNo = data;
      this.dialogVisible = true;
    },
    mergrAfterPrint() {
      this.dialogVisible = false;
      this.printVisible = true;
      this.$set(this.formPrintDialog, "orderNo", this.mergeNo);
      this.$set(this.formPrintDialog, "orderNoType", "2");
    },
    handleClose() {
      this.mergeNo = [];
      this.dialogVisible = false;
    },
    addItem() {
      this.configs.push({ prop: "", value: "" });
    },
    delItem(i) {
      this.configs.splice(i, 1);
    },
    moChange(val) {
      let item = this.moList.find((v) => v.jobNumber == val);
      this.$set(this.rowForm, "moName", item.nickName);
    },
    submitClick() {
      this.configs.map((v) => {
        this.$set(this.rowForm, v.prop, v.value);
      });
      this.isLoading = true;
      changeWh({ idList: this.idList, ...this.rowForm })
        .then((_) => {
          this.$message.success("变更单据成功");
          this.editOrderNoVisible = false;
          this.refresh(false);
        })
        .finally((_) => {
          this.isLoading = false;
        });
    },
    // 修改详情
    editInfo(id, flag) {
      this.changeSub(flag);
      this.loading = true;
      getInfo(id)
        .then((res) => {
          this.formDataDialog = res.data.result;
          this.visible = true;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    // 修改
    rowUpdate(data) {
      rowUpdate(data)
        .then((res) => {
          const message = res.data.message;
          this.$message.success(message || $i18n.t("common.editSuccess"));
          this.visible = false;
          this.refresh();
        })
        .finally(() => {
          this.isLoading = false;
        });
    },
    // 删除
    rowDel(data) {
      this.loading = true;
      rowDel(data)
        .then((res) => {
          const message = res.data.message;
          this.$message.success(message || $i18n.t("common.deleteSuccess"));
          this.refresh();
        })
        .finally(() => {
          this.loading = false;
        });
    },
    // 刷新表格数据
    refresh(isReset = true) {
      this.$refs.eleTable.refresh(isReset);
    },
    changeSub(flag) {
      if (flag) {
        formDescDialog.disabled = true;
        formDescDialog.isShowSubmitBtn = false;
      } else {
        formDescDialog.disabled = false;
        formDescDialog.isShowSubmitBtn = true;
      }
    },
  },
};
</script>
